<template>
  <view class="ss-flex-col">
    <view class="goods-box" v-for="item in pagination.data" :key="item.id">
      <!-- <s-goods-column
        size="sl"
        :data="item"
        @click="sheep.$router.go('/pages/goods/index', { id: item.id })"
      ></s-goods-column> -->
      <view class="newlist" @click.stop="sheep.$router.go('/pages/goods/index', { id: item.id })">
        <image class="newlistimg" :src="sheep.$url.cdn(item.image)" mode="widthFix" />
        <view class="newright">
          <text class="name">{{item.title}}</text>
          <view class="kuitem">
            <text class="ku">库存 {{item.stock}} 件</text>
            <text class="ku yishou">已售{{item.sales}}件</text>
          </view>
          <view class="kuitem">
            <text class="price">¥{{item.price[0]}}/件</text>
            <text class="gui" @click.stop="getgui(item)">立即购买</text>
          </view>
        </view>
      </view>
    </view>
  <!-- 规格与数量弹框 -->
  <s-select-sku
        :goodsInfo="state.goodsInfo"
        :show="state.showSelectSku"
        @addCart="onAddCart"
        @buy="onBuy"
        @change="onSkuChange"
        @close="state.showSelectSku = false"
      />
     
  </view>
</template>

<script setup>
  import { reactive, computed } from 'vue';
// import detailCellSku from './components/detail/detail-cell-sku.vue';
  import sheep from '@/sheep';
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    activeMenu: [Number, String],
    pagination: Object,
  });
  const state = reactive({
    goodsId: 0,
    skeletonLoading: true,
    goodsInfo: {"id":17,"site":0,"type":"normal","title":"漫步者(EDIFIER) HECATE G2专业版 USB7.1声道 游戏耳机电竞耳麦头戴式电脑耳机麦克风吃鸡耳机带线控 黑色","subtitle":"麦克风吃鸡耳机带线控","category_ids":"8,62,64,86,91,92,35","image":"http://file.sheepjs.com/www/default/8.png","image_wh":null,"images":["http://file.sheepjs.com/www/default/9.png","http://file.sheepjs.com/www/default/10.png","http://file.sheepjs.com/www/default/11.png"],"params":[{"title":"频响范围","content":"20Hz-20KHz"},{"title":"线型","content":"单边导线"},{"title":"振膜尺寸","content":"50mm"}],"original_price":"389.00","price":["299.00"],"is_sku":1,"limit_type":"none","limit_num":0,"likes":0,"views":157,"sales":7,"sales_show_type":"exact","stock_show_type":"exact","show_sales":0,"service_ids":[1,2,3,4],"dispatch_type":"express","dispatch_id":1,"is_offline":0,"status":"up","weigh":0,"createtime":"2023-03-09 17:10:33","updatetime":"2023-03-09 17:10:33","deletetime":null,"stock":65,"activity_type":null,"service":[{"id":1,"name":"正品保障","image":"/assets/addons/shopro/img/test/real.png","description":"正品保障，假一赔十","createtime":"2022-11-21 13:31:52","updatetime":"2022-12-03 15:13:04"},{"id":2,"name":"7天无理由退换","image":"/assets/addons/shopro/img/test/seven.png","description":"满足相应条件（吊牌缺失,洗涤后不支持）时，消费者可 申请“7天无理由退换货”","createtime":"2022-11-21 13:31:52","updatetime":"2022-12-03 15:13:11"},{"id":3,"name":"退货运费险","image":"/assets/addons/shopro/img/test/dispatch_fee.png","description":"卖家投保退货运费险，负担一定金额退货运费","createtime":"2022-11-21 13:31:52","updatetime":"2022-11-21 13:31:52"},{"id":4,"name":"极速退款","image":"/assets/addons/shopro/img/test/refund.png","description":"卖家投保退货运费险，负担一定金额退货运费","createtime":"2022-11-21 13:31:52","updatetime":"2022-11-21 13:31:52"}],"skus":[{"id":41,"name":"颜色","parent_id":0,"goods_id":17,"weigh":0,"children":[{"id":42,"name":"白色","parent_id":41,"goods_id":17,"weigh":0},{"id":43,"name":"黑色","parent_id":41,"goods_id":17,"weigh":0},{"id":44,"name":"黄色","parent_id":41,"goods_id":17,"weigh":0}]}],"activities":[],"promos":[],"favorite":null,"status_text":"上架中","type_text":"实体商品","dispatch_type_text":"快递物流","sku_prices":[{"id":45,"goods_sku_ids":"42","goods_sku_text":["白色"],"goods_id":17,"image":"","stock":19,"stock_warning":null,"sales":1,"sn":"","weight":"0.00","cost_price":"120.00","original_price":"389.00","p1_price":"0.00","p1_nums":0,"p2_price":"0.00","p2_nums":0,"p3_price":"0.00","p3_nums":0,"p4_price":"0.00","p4_nums":0,"p5_price":"0.00","p5_nums":0,"price":"299.00","status":"up","weigh":0,"createtime":"2022-10-13 15:59:25","updatetime":"2022-10-13 15:59:25","status_text":"上架"},{"id":46,"goods_sku_ids":"43","goods_sku_text":["黑色"],"goods_id":17,"image":"","stock":27,"stock_warning":null,"sales":5,"sn":"","weight":"0.00","cost_price":"120.00","original_price":"389.00","p1_price":"0.00","p1_nums":0,"p2_price":"0.00","p2_nums":0,"p3_price":"0.00","p3_nums":0,"p4_price":"0.00","p4_nums":0,"p5_price":"0.00","p5_nums":0,"price":"299.00","status":"up","weigh":0,"createtime":"2022-10-13 15:59:25","updatetime":"2022-10-13 15:59:25","status_text":"上架"},{"id":47,"goods_sku_ids":"44","goods_sku_text":["黄色"],"goods_id":17,"image":"","stock":19,"stock_warning":null,"sales":1,"sn":"","weight":"0.00","cost_price":"120.00","original_price":"389.00","p1_price":"0.00","p1_nums":0,"p2_price":"0.00","p2_nums":0,"p3_price":"0.00","p3_nums":0,"p4_price":"0.00","p4_nums":0,"p5_price":"0.00","p5_nums":0,"price":"299.00","status":"up","weigh":0,"createtime":"2022-10-13 15:59:25","updatetime":"2022-10-13 15:59:25","status_text":"上架"}],"content":"","prices":[{"name":"白色","prices":[{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"}]},{"name":"黑色","prices":[{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"}]},{"name":"黄色","prices":[{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"},{"nums":0,"price":"0.00"}]}]},
    showSelectSku: false,
    goodsSwiper: [],
    selectedSkuPrice: {},
    showModel: false,
    total: 0,
    couponInfo: [],
    showActivityModel: false,
    activityInfo: [],
  });
  // 规格变更
  function onSkuChange(e) {
    state.selectedSkuPrice = e;
  }

  // 添加购物车
  function onAddCart(e) {
    sheep.$store('cart').add(e);
    state.showSelectSku = false
  }
  function getgui(e){
    state.goodsInfo = e
    state.showSelectSku = true

  }

  // 立即购买
  function onBuy(e) {
    sheep.$router.go('/pages/order/confirm', {
      data: JSON.stringify({
        order_type: 'goods',
        goods_list: [
          {
            goods_id: e.goods_id,
            goods_num: e.goods_num,
            goods_sku_price_id: e.id,
          },
        ],
      }),
    });
    state.showSelectSku = false
  }
</script>

<style lang="scss" scoped>
  .goods-box {
    width: 100%;
  }
  .newlist{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 15rpx 0;
    border-bottom: 1rpx solid #eee;
    .newlistimg{
      width: 180rpx;
      border-radius: 10rpx;
      height: 180rpx;

    }
    .newright{
      width: 65%;
      display: flex;
      flex-direction: column;
      padding-left: 20rpx;
      .name{
        color: #333;
        font-weight: 400;
        font-size: 26rpx;
      }
      .kuitem{
        margin-top: 20rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        .ku{
          color: #666;
          font-size: 26rpx;
          font-weight: 400;
        }
        .yishou{
          margin-left: 20rpx;
        }
        
        .price{
          color: red;
          font-size: 30rpx;
          font-weight: 500;
        }
        .gui{
          padding: 4rpx 8rpx;
          background-color: red;
          color: #fff;
          border-radius: 50rpx;
          font-size: 25rpx;
          font-weight: 400;
          margin-left: auto;
        }
      }
    }
  }
</style>
